/*----------------------------------------*\
  LINKS
\*----------------------------------------*/

.link,
main a {
  @apply text-primary-600 hover:text-primary-800 focus:text-primary-800;
  @apply underline underline-offset-2 cursor-pointer;
  @apply break-words;
}

.link--negative {
  @apply text-white hover:text-text-300 focus:text-text-300;
  @apply underline underline-offset-2 cursor-pointer;
}

.link--block {
  @apply block;
}

.link--external,
main a[rel*='external'] {
  @apply link;

  &:not(.btn, .btn--link) {
    &::after {
      content: '';
      @apply inline-block relative w-[1em] h-[1em];
      @apply top-[0.2em] mx-[0.125em];
      @apply bg-current;
      mask-repeat: no-repeat;
      mask-image: var(--icon-external-link);
    }
  }
}

:root {
  --icon-external-link: url('data:image/svg+xml,\
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> \
    <path d="m14.5 2.7v1.9h3.8l.6-.5.3.1-.7.6-6.4 6.4 1.4 1.4 6.4-6.4.6-.7.1.3-.5.7v3.7h1.9v-7.5z"/> \
    <path d="m16.9 19.9h-12v-12.2h5.7v-1.9h-7.6v16h15.9v-7.7h-2z"/> \
  </svg>');
}
